<template>
  <div class="index">
    <Header></Header>
    <div class="main">
      <div class="indexMain">
        <div class="section1 clearfix" >
         <el-form ref="form"
          :inline="true"
          style="display:flex;justify-content:center;"
                   :model="formInline"
                   label-width="110px">

              <el-form-item label="应急预案类别：">
                	<el-select v-model="formInline.planCategory" >
                    <el-option v-for='(item,index) in types' :label="item.name" :value="item.value" :key='index'></el-option>
                  </el-select>
              </el-form-item>

              <el-form-item label="关键字：" >
                <el-input v-model="formInline.companyEmergencyName" style="width:200px;"></el-input>
              </el-form-item>
              <el-form-item >
            <a class="indexSearch" @click='$router.push({name:"search",params:formInline})'><i class="el-icon-search"></i> 搜索</a>

              </el-form-item>
          </el-form>
        </div>

        <!-- <div class="section2" v-if="changemsg!=4" >
          <p class="sec2_main">
            <span>提示信息</span>

            <template v-if="changemsg==1">
                <strong>企业目前处于企业信息录入管理阶段！</strong>
                <router-link to='basic'>基本信息录入</router-link>
            </template>
            <template v-if="changemsg==2">
                <strong>企业目前处于风险信息管理阶段！</strong>
                <router-link to='risk'>风险信息</router-link>
            </template>
            <template v-if="changemsg==3">
                <strong>企业目前处于应急资源信息管理阶段！</strong>
                <router-link to='risk'>应急资源信息</router-link>
            </template>
          </p>
        </div> -->

        <div class="section3 modules_main">
          <h2 class="secTitle">企业信息录入管理</h2>
          <div class="modules_list clearfix">
            <el-col :span='8'
                    class="modules">
              <a @click="togochange('basic')"><img src="../../../static/images/basic_icon.png" />
                <p>基本信息</p>
              </a>
            </el-col>
            <el-col :span='8'
                    class="modules">
              <a @click="togochange('risk')" :class="changemsg>1?'':'selectmsg'"><img src="../../../static/images/risk_icon.png" />
                <p>风险信息</p>
              </a>
            </el-col>
            <el-col :span='8'
                    class="modules">
              <a  @click="togochange('resources')" :class="changemsg>=3?'':'selectmsg'"><img src="../../../static/images/resource_icon.png" />
                <p>应急资源信息</p>
              </a>
            </el-col>
          </div>
        </div>
        <div class="section4 modules_main">
          <h2 class="secTitle">企业应急预案管理</h2>
          <div class="modules_list clearfix">
            <el-col :span='8'
                    class="modules">
              <router-link to='estimate'><img src="../../../static/images/formation_icon.png" />
                <p>应急预案编制</p>
              </router-link>
            </el-col>
            <el-col :span='8'
                    class="modules">
                     <!--to='underlineAssess'-->
              <router-link to='onlineAssess' ><img src="../../../static/images/assess_icon.png" />
                <p>应急预案评估</p>
              </router-link>
            </el-col>
            <el-col :span='8'
                    class="modules">
               <a   @click="showmsg"><img src="../../../static/images/revise_icon.png" />
                <p  >应急预案修订</p>
              </a>
            </el-col>
            <!-- <el-col :span='8'
						@click="showmsg"
                    class="modules">
              <router-link to='index'  @click.native="showmsg"><img src="../../../static/images/guide_icon.png" />
                <p  >应急预案备案指导</p>
              </router-link>
            </el-col>
            <el-col :span='8'
						@click="showmsg"
                    class="modules">
              <router-link to='index' @click.native="showmsg"><img src="../../../static/images/drill_icon.png" />
                <p  >应急预案培训演练</p>
              </router-link>
            </el-col>
            <el-col :span='8'
						@click="showmsg"
                    class="modules">
              <router-link to='index' @click.native="showmsg"><img src="../../../static/images/estimate_icon.png" />
                <p>应急能力评估</p>
              </router-link>
            </el-col> -->
          </div>
        </div>

        <div class="section5" style="display:none;">
          <h2 class="secTitle">应急资源<router-link to='index' class="more" style="display:none;">更多</router-link></h2>
          <ul class="resList clearfix">
              <li v-for="(item,index) in navList" :key='index' :class="activeIndex == index ? 'active':''" @click="activeIndex =index">{{item}}<span></span></li>
              <!-- <li style="display:none;">留言区<span></span></li> -->
          </ul>
          <div class="resCon">
              <ul class="resCon_list clearfix">
                 <li v-for="(item,index) in data" :key="index" ><router-link :to='{name:"details",query:{id:item.intId}}'>{{item.varName}}</router-link></li>
              </ul>
          </div>
        </div>



				 <el-dialog
				   title="提示"
				   :visible.sync="dialogVisible"
				   width="300px"
				  >
	        <div style="text-align: center;font-size: 16px;height:10px;line-height:10px;">

						暂未开通
					</div>

				 </el-dialog>

      

      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import config from "../../config.js";
import Header from '../common/header'
import Footer from '../common/footer'
export default {
  data () {
    return {
     formInline: {
					companyEmergencyName:"" ,
					planCategory: ""
				},
        activeIndex:0,
        navList:[
          '应急动态','应急知识','应急处置卡'
        ],
        data:[],
      types:[
						{
						name:'全部',
						value:''
					},
					{
						name:'综合预案',
						value:'1'
					},
						{
						name:'专项预案',
						value:'2'
					},
						{
						name:'现场处置预案',
							value:'3'
					}
				],
				dialogVisible:false,
        changemsg:1,
        loginstate:4,
        stepNote:true
    }
  },
  components: {
    Header,
    Footer
  },
  watch:{
    'activeIndex':function(newV,oldV){
      this.getList(newV+1)
    },
    '$store.state.loginstates': function (newVal) {
      this.loginstate = newVal;
    }
  },
  mounted(){
    
    if(localStorage.showFlag == 1){
       this.$store.state.showflag1=false
    }else{
      if(localStorage.showTime == 0){
        this.$store.state.showflag1 = true
        localStorage.removeItem('showTime')
      }
    }
   
   //  this.getList(1)
    //  this.changemsg = this.$store.state.changestate;
    //  console.log(this.changemsg)
  },
  methods:{
    getList(n){
       this.$axios
        .get(config.baseUrl2 + "getContingencyPlanList?page=1&limit=6&type="+n)
        .then(res => {

          if (res.data.code==0) {
            this.data = res.data.page.list
             console.log(res.data.page.list)
          } else {
            this.$message.warning(res.data.msg);
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
		showmsg(){
			this.dialogVisible = true;
		},
    lookstatus(){
         let params ={
            "companyId":JSON.parse(localStorage.getItem('user')).companyId
         }
         this.$axios
         ({
            method: 'post',
            url: this.$baseUrl+"emergency/v1.0/selected/risk",
            data:params
         }).then(
           (res)=>{
              if(res.data.meta.success){
                let arr = res.data.data.riskIds
                let brr =  arr.split(",");
                 let crr = [];
                 brr.forEach(
                   (item)=>{
                      crr = [...crr,{riskId:item}]
                   }
                 )
                localStorage.newList = JSON.stringify(crr);
                this.changemsg = 4;
              }else{
                  this.newmsg();
              }
           }
         )
    },
    newmsg(){
      let params ={
            "companyId":JSON.parse(localStorage.getItem('user')).companyId
         }
        this.$axios
         ({
            method: 'post',
            url: this.$baseUrl+"emergency/v1.0/company/info",
            data:params
         }).then(
            (res)=>{
              let data = res.data.data;
              console.log(data);

              if(data.varEmergencyDept){
                  this.changeList = true;
                  this.$store.state.changestate = 2;
                  let arr =[];
                  if(localStorage.getItem("newList")){
                      arr = JSON.parse(localStorage.getItem("newList"));
                  }
                  if(arr.length>=2){
                     this.changemsg = 3;
                  }else{
                     this.changemsg = 2;
                  }
              }else{
                  this.changemsg = 1;
              }
         })
    },
    togochange(item){
       if(item=="basic"){
          this.$router.push(item)
       }else if(item=="risk"){
          if(this.changemsg>=2){
              this.$router.push(item)
          }else{
              this.$message.warning("请填写公司信息");
          }
       }else if(item=="resources"){
          if(this.changemsg>=3){
              this.$router.push(item)
          }else{
              this.$message.warning("请录入风险信息");
          }
       }
    }
  },
  created() {
    this.lookstatus();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.indexMain {
  padding: 0 30px;
  > div {
    /* background: #fff; */
  }
  .section1 {
		background: #fff;
    padding: 9px 30px 12px;
    margin-top: 20px;
    .ml50 {
      margin-left: 50px;
    }
    .indexSearch {
      display: block;
      line-height: 36px;
      width: 79px;
      height: 36px;
      background: #4080ff;
      background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
      color: #fff;
      text-align: center;
      border: none;
      border-radius: 8px;
      margin-top: 3px;
      margin-left: 15px;
      cursor: pointer;
      > img {
        position: relative;
        top: -1px;
        margin-right: 3px;
      }
    }
    .indexSearch:hover {
      opacity: 0.8;
    }
  }
  .section2 {
		background: #fff;
    height: 120px;
    text-align: center;
    margin-top: 15px;
    padding-top: 42px;
    // display:none;
    .sec2_main {
      height: 36px;
      > span {
        color: #666;
        display: inline-block;
        width: 92px;
        height: 28px;
        border-radius: 14px;
        background: #f3f3f3;
        text-align: center;
        line-height: 28px;
        margin-top: 4px;
      }
      > strong {
        font-size: 16px;
        font-weight: bold;
        margin: 0 30px 0 20px;
        line-height: 36px;
        color: #666;
      }
      > a {
        display: inline-block;
        height: 36px;
        width: 125px;
        text-align: center;
        line-height: 36px;
        color: #7255e7;
        background: #f4f8ff;
        border: 1px solid #4080ff;
        border-radius: 8px;
      }
      > a:hover {
        opacity: 0.8;
      }
    }
  }
  .modules_main {
		background: #fff;
    margin-top: 20px;
    padding: 25px 0 0;
    .secTitle {
      padding-left: 25px;
      font-size: 16px;
      font-weight: bold;
      color: #666;
      margin-bottom: 20px;
    }
    .modules_list {
      padding: 0 150px;
      .modules {
        text-align: center;
        margin-bottom: 30px;
        a {
          display: block;
          width: 130px;
          margin: 0 auto;
          img {
            margin-bottom: 12px;
          }
          p {
            font-size: 16px;
            color: #666;
          }
        }
        a:hover {
          opacity: 0.8;
        }
      }
    }
  }
  .section5 {
		background: #fff;
    margin-top: 20px;
    padding: 25px 0 50px;
    .secTitle {
      padding: 0 25px;
      font-size: 16px;
      font-weight: bold;
      color: #666;
      margin-bottom: 50px;
      .more {
        color: #7255e7;
        float: right;
        background: url("../../../static/images/more_icon.png") no-repeat right
          center;
        padding-right: 20px;
        font-size: 14px;
        font-weight: normal;
        margin-top: 2px;
      }
      .more:hover {
        opacity: 0.8;
      }
    }
    .resList {
      width: 550px;
      margin: 0 auto 50px;
      li {
        float: left;
        width: 100px;
        text-align: center;
        color: #666;
        cursor: pointer;
        position: relative;
        height: 30px;
        margin-right: 50px;
        > span {
          opacity: 0;
          position: absolute;
          display: block;
          width: 24px;
          height: 4px;
          border-radius: 2px;
          left: 50%;
          margin-left: -12px;
          bottom: 0;
          background: #009ff9;
        }
      }
      li:last-child {
        margin-right: 0;
      }
      li:hover,
      li.active {
        color: #009ff9;
        > span {
          opacity: 1;
        }
      }
    }
    .resCon {
      padding: 0 200px;
      .resCon_list {
        li {
          width: 50%;
          line-height: 42px;
          color: #666;
          float: left;
          a {
            display: block;
            position: relative;
            width: 80%;
            white-space: nowrap;
            margin:0 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 10px;
          }
          a:before {
            content: ".";
            position: absolute;
            color: #666;
            font-size: 26px;
            left: 0;
            top: -8px;
          }
          a:hover {
            color: #009ff9;
          }
        }
      }
    }
  }
}
.selectmsg{
    cursor: not-allowed;
}
</style>
<style lang='less'>
.stepDialog{
    .el-dialog__body{
      padding: 0;
    }
    .step{
      .stepImg{
        text-align: center;
        padding: 35px 0 45px;
      }
      .stepBottom{
        background: #f9f9f9;
        height: 70px;
        border-radius: 0 0 8px 8px;
        line-height: 70px;
        text-align: center;
        img{
          margin-right: 5px;
          position: relative;
          top: -1px;
        }
        a.noteBtn{
          cursor: pointer;
          color: #7254e6;
          display: inline-block;
          height: 36px;
          line-height: 36px;
          width: 96px;
          text-align: center;
          border: 1px solid #3f80fe;
          border-radius: 8px;
          margin-left: 15px;
        }
        a.noteBtn:hover{
          opacity: .8;
        }
      }
    }
  }
</style>
